<template>
	<view class="transaction">
		<view class="transaction_tabs">
			<view class="transaction_tabs_item" v-for="item in payTypes" :key="item.value" @click="changeTab(item)">
				<text :class="{ fw700: transactionType === item.value }" :style="{color: transactionType === item.value ? '#333' : '#acacac'}">{{ item.text }}</text>
				<view v-show="transactionType === item.value" class="tabs_item_text_active"></view>
			</view>
		</view>
		<view class="amount dis">
			<view class="amount_select dis_center" >
				<view v-if="selectValue.text">
					<view class="icon_box" >
						<uni-icons :type="selectValue.value" custom-prefix="iconfont" :size="22" color="#fe674a"/>
					</view>
					<text class="fs26 ml15 fw700" >{{ selectValue.text }}</text>
				</view>
			</view>
			<view class="fl1 amount_input">
				<uni-easyinput v-model="amount" @change="amountChange" :trim="true" :inputBorder="false"></uni-easyinput>
			</view>
		</view>
		<view class="swiper_classify">
			<swiper class="swiper" :style="{ height: swiperHeight }" :indicator-dots="true" indicator-active-color="#ffcd54">
				<swiper-item v-for="(item,index) in classifyList" :key="index">
					<view class="swiper_item dis_wrap">
						<view class="swiper_item_tags dis_column_center" v-for="child in item" :key="child.value" @click="classifyIndex = child.value">
							<view class="icon_box">
								<uni-icons :type="child.value" custom-prefix="iconfont" :size="22" :color="classifyIndex === child.value ? '#fe674a' : '#333'"></uni-icons>
							</view>
							<text class="fs26 mt15">{{ child.text }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="list_box pb30">
			<view class="list_item dis">
				<view class="list_item_icon dis_center">
					<uni-icons type="calendar" :size="22" color="#fe664a"></uni-icons>
				</view>
				<view class="list_item_flex fl1 pt10 pb10 bb1">
					<uni-datetime-picker type="date" :clear-icon="false" :border="false" return-type="YYYY-MM-DD" v-model="tallyTime"/>
				</view>
			</view>
			<view class="list_item dis">
				<view class="list_item_icon dis_center">
					<uni-icons type="map" :size="22" color="#fe664a"></uni-icons>
				</view>
				<view class="list_item_flex fl1 pt10 pb10 bb1">
					<picker mode="time" :value="meticulousTime" @change="e => (meticulousTime = e.detail.value)" start="00:00" end="23:59">
						<view class="uni-input">{{meticulousTime}}</view>
					</picker>
				</view>
			</view>
			<view class="list_item dis">
				<view class="list_item_icon dis_center">
					<uni-icons type="compose" :size="22" color="#fe664a"></uni-icons>
				</view>
				<view class="list_item_flex fl1 pt10 pb10 bb1">
					<uni-easyinput v-mode="desc" @input="e => (desc = e)" class="pl15 pr15" :trim="true" :inputBorder="false" placeholder="请输入备注" placeholder-style="font-size: 26rpx;padding-left: 0;" style="height: 72rpx;"></uni-easyinput>
				</view>
			</view>
			<view class="list_item dis">
				<view class="list_item_icon dis_center">
					<uni-icons type="wallet" :size="22" color="#fe664a"></uni-icons>
				</view>
				<view class="list_item_flex dis fl1 pt10 pb10" @click="$refs.aRefs.open()">
					<text class="fs26">{{ accountText.text }}</text>
				</view>
			</view>
			<view class="list_item dis" v-if="transactionType === '2'">
				<view class="list_item_icon dis_center">
					<uni-icons type="wallet" :size="22" color="#fe664a"></uni-icons>
				</view>
				<view class="list_item_flex dis fl1 pt10 pb10" @click="refundOpen">
					<text class="fs26">{{ refundText.text }}</text>
				</view>
			</view>
		</view>
		<view class="mt40 dis_center">
			<button class="basic_button submit" @click="submit">提交</button>
		</view>
		<uniAccount ref="aRefs" @selected="selected" :options="accountOptions" :value="accountValue"/>
		<uniAccount ref="refundRefs" @selected="redundSelected" :options="redunds" :value="refundValue"/>
	</view>
</template>

<script>
	import uniAccount from '../../../components/uni-account/index.vue'
	import store from '../../../store/index.js'
	import moment from 'moment'
	import { icons, payTypes } from '../../../utils/dict-data.js'
	import { validate } from './validate_transaction'
	const uniAaccount = uniCloud.importObject('account')
	const uniTransaction = uniCloud.importObject('transaction')
	export default {
		components: {
			uniAccount
		},
		data() {
			return {
				payTypes,
				transactionType: '1',
				classifyIndex: undefined,
				totalList: [],
				classifyList: [],
				amount: undefined,
				tallyTime: '',
				accountIndex: 0,
				meticulousTime: '',
				accounts: [],
				accountValue: '',
				redunds: [],
				refundValue: '',
				desc: ''
			}
		},
		computed: {
			userInfo() {
				return store.state.user.userInfo
			},
			selectValue() {
				const find = this.totalList.find(c => c.value === this.classifyIndex)
				return find ? find : { text: '', value: '' }
			},
			accountOptions() {
				if(['0', '1'].includes(this.transactionType)) {
					return this.accounts
				} else {
					return this.accounts.filter(c => c.accountType !== '3')
				}
			},
			accountText() {
				const find = this.accounts.find(c => c.value === this.accountValue)
				return find ? find : { text: '账户选择', value: '' }
			},
			refundText() {
				const find = this.accounts.find(c => c.value === this.refundValue)
				return find ? find : { text: '还款账户', value: '' }
			},
			swiperHeight() {
				if(this.classifyList.length > 0 && this.classifyList[0].length > 6) {
					return '400rpx'
				} else {
					return '200rpx'
				}
			}
		},
		onLoad() {
			uniAaccount.getAccout().then(res => {
				this.accounts = res.data.map(c => ({ text: c.accountName, value: c._id, accountType: c.accountType }))
			})
			this.initClassify()
			this.tallyTime = moment().format('YYYY-MM-DD')
			this.meticulousTime = moment().format('HH:mm')
		},
		methods: {
			initClassify() {
				let arr = []
				let index = 0
				this.classifyList = icons.reduce((arr, row) => {
					this.totalList.push({ text: row.text, value: row.value })
					if(arr[index] && arr[index].length > 0) {
						if(arr[index].length === 12) {
							index += 1
							arr[index] = [{ text: row.text, value: row.value }]
						} else {
							arr[index].push({ text: row.text, value: row.value })
						}
					} else {
						arr[index] = [{ text: row.text, value: row.value }]
					}
					return arr
				}, [])
			},
			refundOpen() {
				this.redunds = this.accounts.filter(c => c.accountType === '3')
				this.$refs.refundRefs.open()
			},
			changeTab(item) {
				this.transactionType = item.value
				if(item.value === '2') {
					this.classifyIndex = 'icon-huankuan'
				} else {
					this.classifyIndex = undefined
				}
			},
			amountChange() {
				if(this.amount && !/^-?\d+(\.\d+)?$/.test(this.amount)) {
					uni.showToast({
						title: '金额输入格式不正确!',
						icon: 'none'
					})
					this.amount = ''
				}
			},
			submit() {
				const obj = {
					userId: this.userInfo.uid,
					icon: this.classifyIndex,
					accountId: this.accountText.value,
					transactionType: this.transactionType,
					amount: this.amount,
					desc: this.desc,
					tallyTime: this.tallyTime,
					meticulousTime: this.meticulousTime,
					refund: this.refundText.value
				}
				const data = validate(obj)
				if(!data) {
					const result = Object.assign({}, obj)
					uniTransaction.add(result).then(res => {
						if(res.code === 500) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
						}
						uni.navigateBack()
						uni.$emit('showTransction')
					})
					
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			selected(value) {
				this.accountValue = value
			},
			redundSelected(value) {
				this.refundValue = value
			}
		}
	}
</script>

<style>
	.uni-date .icon-calendar {
		display: none;
	}
</style>

<style lang="scss" scoped>
	.transaction_tabs{
		padding: 25rpx 0rpx;
		box-shadow: 0 4rpx 20rpx 1rpx #ddd;
		display: flex;
		.transaction_tabs_item {
			position: relative;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			.tabs_item_text_active {
				position: absolute;
				left: 50%;
				bottom: -5px;
				transform: translateX(-50%);
				width: 60rpx;
				height: 8rpx;
				border-radius: 4rpx;
				background-color: #ffcd54;
			}
		}
	}
	.amount {
		height: 150rpx;
		.amount_select {
			width: 200rpx;
		}
		.amount_input {
			height: 80rpx;
			border-bottom: 1px solid #ddd;
			padding: 0 20rpx;
			input {
				height: 100%;
				text-align: end;
				color: #ffcd54;
			}
		}
	}
	.swiper_classify {
		.swiper {
			.swiper_item {
				.swiper_item_tags {
					width: 125rpx;
					padding: 18rpx 0;
				}
			}
		}
	}
	.list_box {
		.list_item {
			.list_item_icon {
				width: 80rpx;
			}
			.list_item_flex {
				min-height: 72rpx;
				.account_tags {
					padding: 6rpx 30rpx;
					border: 2rpx solid #1884ec;
					border-radius: 24rpx;
					margin: 0 20rpx;
					font-size: 24rpx;
				}
				.account_tags_active {
					background-color: #ffcd54;
					border: 2rpx solid #ffcd54;
					color: #fff;
				}
				.uni-input {
					height: 70rpx;
					display: flex;
					align-items: center;
					color: #acacac;
				}
			}
		}
	}
	.submit {
		width: 600rpx;
		background-color: red;
		color: #fff;
	}
	.icon_box {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #ebebeb;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>